import axios from 'axios'
import store from './store'
import { ElLoading,ElMessage } from 'element-plus';
import { ref } from 'vue';

// 以后不需要
axios.defaults.baseURL = '/dev/'   //如果是开发环境，设置baseURL为'/dev/'，在vue.config.js文件中配置，解决开发环境中的跨域问题

const Service = axios.create({      //创建axios的实例Service，可在此进行一些基本配置
    timeout: 10000
})

Service.interceptors.request.use(request => {      //请求拦截器，在此处（在发送请求前）对要发送的数据进行处理
    // const token = store.state.user == null ? null :  store.state.user.id            //把用户信息存储在store中的state中，好处是可以在多个实例中调用，跟全局变量类似
    // if(token){
    //     request.headers.authorization = `${token}`  //`${}`字符串占位符  在请求头中添加用户token
    // }
    const loadingInstance = ElLoading.service({ fullscreen: true });
    return request
})

Service.interceptors.response.use(response => {     //响应拦截器，在此处对响应数据进行处理
    const loadingInstance = ElLoading.service({ fullscreen: true });        //LoadingService 会返回一个 Loading 实例，可通过调用该实例的 close 方法来关闭它
    if(loadingInstance != null){                        
        loadingInstance.close();   // 以服务的方式调用的 Loading 需要异步关闭
    }
    if(response.data.code != '0'){                  //response.data.code != '0'表示请求失败，此处response.data.code不是http中response.data.code，其值是后台配置的
        ElMessage({                                   //Message，element-ui的信息提示组件
            message: response.data.msg,             //显示信息从response.data.message中获取，这也是后台配置的
            type: 'error',
            duration: 2000
        })
    }
    return response
}, error => {
    const loadingInstance = ElLoading.service({ fullscreen: true });        //LoadingService 会返回一个 Loading 实例，可通过调用该实例的 close 方法来关闭它
    if(loadingInstance != null){                        
        loadingInstance.close();   // 以服务的方式调用的 Loading 需要异步关闭
    }
    ElMessage({
        message: '系统错误' + error.message,
        type: 'error',
        duration: 2000
    });
})

export { Service }